<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="zh">
<head th:replace="commons :: head('制定学习计划')">
    <title>Messages : Create</title>
</head>
<body>
<div th:insert="student/student::nav(0)">
</div>

<div class="container">

    <div class="row">
        <button class="btn btn-primary" data-toggle="modal" onclick="addCourse()">添加选课</button>
        <div class="modal fade" id="modal">
            <div class="modal-dialog">
                <div class="modal-content" style="width: 1000px;left: -200px;">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                        <h4 class="modal-title">请选择课程</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="state" class="col-sm-2 control-label">主选或备选：</label>
                                <div class="col-sm-10">
                                    <select class="form-control" id="state" name="state">
                                        <option selected value="主选">主选</option>
                                        <option value="备选">备选</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                        <table id="table1" class="table table-responsive table-hover">
                            <thead>
                            <tr>
                                <td>课程编号</td>
                                <td>课程名称</td>
                                <td>课程学分</td>
                                <td>课程级别</td>
                                <td>课程费用</td>
                                <td>教授名字</td>
                                <td>教授所在学院</td>
                                <td>先决课程</td>
                                <td>已选课人数</td>
                                <td>选课</td>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
    <table id="table" class="table table-responsive table-hover">
        <thead>
        <tr>
            <td>学习计划编号</td>
            <td>课程名称</td>
            <td>课程学分</td>
            <td>课程级别</td>
            <td>课程费用</td>
            <td>教授名字</td>
            <td>教授所在学院</td>
            <td>先决课程</td>
            <td>已选课人数</td>
            <td>退选</td>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
    <div class="row">
        <div class="col-md-6" id="page_info">
        </div>
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination" id="page_nav">
                </ul>
            </nav>
        </div>
    </div>
    <div th:replace="commons::footer"></div>
    <script>
        var click_id,add;
        function addCourse(){
            $.ajax({
                url:location.href+'/getCourse',
                success:function (result) {
                    console.log(result);
                    build_tables1(result.extend.data)
                    $("#modal").modal({
                        backdrop:"static"
                    });
                }
            })
        }
        //构建信息表
        function build_tables1(result) {
            $("#table1 tbody").empty();
            console.log(result);
            $.each(result, function (index, item) {
                var id = $("<td></td>").append(item.course.id);
                var name = $("<td></td>").append(item.course.name);
                var courseScore = $("<td></td>").append(item.course.courseScore);
                var level = $("<td></td>").append(item.course.level);
                var fee = $("<td></td>").append(item.course.fee);
                var professor = $("<td></td>").append(item.professor.name);
                var collegeName = $("<td></td>").append(item.professor.college.collegeName);
                var preCoures = $("<td></td>").append(item.prerequisite==null?"无":item.preCoures.name);
                var orderNum = $("<td></td>").append(item.orderNum);

                var submitBtn = $("<button></button>").addClass("btn btn-success btn-sm submit_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-ok")).append("选课");
                var td1= $("<td></td>").append(submitBtn);
                $("<tr></tr>").append(id,name,courseScore,level,fee,professor,collegeName,preCoures,orderNum ,td1).appendTo("#table1 tbody").attr("item_id",item.id);
            })
        }
        $(function () {
            toPageNum();
        });
        function toPageNum() {
            $.ajax({
                url: location.href+"/getAllStudyProgram",
                success: function (result) {
                    console.log(result);
                    build_tables(result.extend.data);
                }
            });
        }
        //构建信息表
        function build_tables(result) {
            $("#table tbody").empty();
            $.each(result, function (index, item) {
                var studyId = $("<td></td>").append(item.studyId);
                var courseName = $("<td></td>").append(item.courseOffering.course.name);
                var courseScore = $("<td></td>").append(item.courseOffering.course.courseScore);
                var level = $("<td></td>").append(item.courseOffering.course.level);
                var fee = $("<td></td>").append(item.courseOffering.course.fee);
                var professor = $("<td></td>").append(item.courseOffering.professor.name);
                var collegeName = $("<td></td>").append(item.courseOffering.professor.college.collegeName);
                var preCoures = $("<td></td>").append(item.courseOffering.prerequisite==null?"无":item.courseOffering.preCoures.name);
                var orderNum = $("<td></td>").append(item.courseOffering.orderNum);
                var trashBtn = $("<button></button>").addClass("btn btn-danger btn-sm trash_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("退选");
                var td3 = $("<td></td>").append(trashBtn);
                $("<tr></tr>").append(studyId, courseName, courseScore, level, fee,professor,collegeName,preCoures,orderNum,td3).appendTo("#table tbody").attr("item_id",item.id);
            })
        }
        //退选
        $(document).on("click",".trash_btn",function(){
            click_id=$(this).parent().parent().attr("item_id");
            console.log(click_id);
            var name = $(this).parents("tr").find("td:eq(1)").text();
            if(confirm("确定推选"+name+"吗？")){
                $.ajax({
                    url: 'dropClass?spId='+click_id,
                    type: 'get',
                    success: function (result) {
                        console.log(result);
                        toPageNum();
                    }
                })
            }
        });
        //选课
        $(document).on("click",".submit_btn",function(){
            click_id=$(this).parent().parent().attr("item_id");
            var data=$("#modal form").serialize();
            $.ajax({
                url: location.href+"/add",
                data:data+'&courseofferingId='+click_id,
                type: 'post',
                success: function () {
                    $('#modal').modal('hide');
                    toPageNum();
                }
            });
        });
    </script>
</div>
</body>
</html>